<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3交互式数据可视化</title>
</head>
<body>
	<ul>
		<li>根据两段弧来绘制弦，共有五个访问器</li>
		<li>source()、target()、radius()、startAngle()、endAngle()</li>
	</ul>
	<div class="chord">
		
	</div>
	<script src="js/d3_3.5.7.js"></script>
	<script>
		var width = 500;
		var height = 500
		var svg = d3.select(".chord").append('svg').attr({"width":width,"height":height});

		var dataset = {
			startArc:{
				start:0.2,
				end:Math.PI * 0.3,
				redius:100
			},
			endArc:{
				start:Math.PI * 1.0,
				end:Math.PI * 1.6,
				redius:100
			}
		}

		var chord = d3.svg.chord()
									.source(function(d) {
										return d.startArc;
									})
									.target(function(d) {
										return d.endArc;
									})
									.radius(200)
									.startAngle(function(d) {
										return d.start;
									})
									.endAngle(function(d) {
										return d.end
									})
		svg.append("path").attr("d",chord(dataset))
			.attr({"transform":"translate(200,200)","stroke":"black","stroke-width":3}).attr("fill","yellow")
	</script>
</body>
</html>